import {useState,useEffect} from "react";

import './index.less'
const serverUrl = 'https://localhost:1234';
import SvgIcon from '@/components/svgIcon';


const Header = () => {
  const [showDownLoad,setShowDownLoad] = useState<Boolean>(false)
  useEffect(()=>{
    const isAndroid = /Android/i.test(navigator.userAgent);
    setShowDownLoad(isAndroid); },[])
    //[]:标识这个副作用只在组件挂在时执行一次
    // useEffect :的第二个参数决定了副作用的执行机制
    // 没有依赖项时 副作用在每次渲染更新时执行
    // 副作用在依赖项发生变化时执行

  return <>
  {showDownLoad&&(<div className="DownLoad" >
  <img  src="https://cdn.metacloud.cc/10045/image/e6221f9922a5410bac5b0188fae88ae4.webp" className="indexLogo" />
   <div> Log in through our App to  exclusive offers! </div>
  <button>Install</button>
  <div className="close" onClick={()=>{setShowDownLoad(false)}}>x</div>
  </div>)}
  <div className="appHeader"> 
    <div className="left-icon"><SvgIcon name="menu" size="16"  color="#fff"/><img src="https://cdn.metacloud.cc/10045/image/2ec94990b9cc42c2a89640b78990c711.webp" alt="" className="logo"/></div>
 <div className="right-content">
  <div className="balance">
    <img src="https://cdn.metacloud.cc/game/image/8ee7557320c64800aaa9064562813127.webp" alt="" />
    <strong>$19.36</strong>
    <div className="addIcon">+</div>
  </div>
  <div className="messageTip">
  <SvgIcon name="Notice" size="16"  color="#FDC113"/>
  </div>
 </div>
  </div>
  </>;
};

export default Header;
